<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>商品管理</el-breadcrumb-item>
			<el-breadcrumb-item>商品分类</el-breadcrumb-item>
		</el-breadcrumb>
		<el-card>
			<el-button type="primary" @click="addCateDialog">添加分类</el-button>
			<el-table :data="cateList" style="width: 100%;margin-bottom: 20px;" row-key="cat_id" border
				:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
				<el-table-column type="index" label="#">
				</el-table-column>
				<el-table-column prop="cat_name" label="分类名称" width="180">
				</el-table-column>
				<el-table-column prop="cat_deleted" label="是否有效" width="180">
					<template v-slot="scope">
						<i class="el-icon-circle-check" v-if="scope.row.cat_deleted === false"
							style="color: #55A532;"></i>
						<i class="el-icon-circle-close" v-else style="color: red;"></i>
					</template>
				</el-table-column>
				<el-table-column prop="cat_level" label="排序">
					<template slot-scope='scope'>
						<el-tag v-if="scope.row.cat_level === 0 ">一级</el-tag>
						<el-tag type="success" v-else-if="scope.row.cat_level ===1">二级</el-tag>
						<el-tag type="warning" v-else>三级</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template v-slot="scope">
						<el-button type="primary" icon="el-icon-edit" size="small" @click="">编辑</el-button>
						<el-button type="danger" icon="el-icon-delete" size="small" @click="">删除</el-button>
						<!-- <el-button type="warning" icon="el-icon-setting" size="small"></el-button> -->
					</template>
				</el-table-column>
			</el-table>
			
			<el-pagination
			      @size-change="handleSizeChange"
			      @current-change="handleCurrentChange"
			      :current-page="querInfo.pagenum"
			      :page-sizes="[5, 10, 15, 20]"
			      :page-size="querInfo.pagesize"
			      layout="total, sizes, prev, pager, next, jumper"
			      :total="total">
			</el-pagination>
		</el-card>
		
		<el-dialog
		  title="添加分类"
		  :visible.sync="dialogVisible"
		  width="50%"
		  @close="addCateDialogClose">
		  <el-form :model="addCateForm" :rules="addCateFormRules" ref="addCateFormRef" label-width="100px">
		    <el-form-item label="分类名称:" prop="cat_name">
		      <el-input v-model="addCateForm.cat_name"></el-input>
		    </el-form-item>
			<el-form-item label="父级分类:">
			   <el-cascader
			      :options="parentCateList"
				  :props="cascaderProps"
				  v-model="selectedKeys"
				  clearable
			      @change="handleChange">
			   </el-cascader>
			</el-form-item>
		  </el-form>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="dialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="addCate">确 定</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				cateList: [],
				querInfo: {
					type: 3,
					pagenum: 1,
					pagesize: 5
				},
				total: 0,
				dialogVisible: false,
				addCateForm:{
					cat_name:'',
					cat_pid:0,
					cat_level:0
				},
				addCateFormRules:{
					cat_name:[
						{ required: true, message: '请输入分类名称', trigger: 'blur' }
						]
				},
				parentCateList:[],
				cascaderProps:{
					value:"cat_id", 
					label:"cat_name", 
					children:"children",
					expandTrigger: 'hover',
					checkStrictly: true
				},
				selectedKeys:[]
			}
		},
		created() {
			this.getCateList();
		},
		methods: {
			async getCateList() {
				const {
					data: res
				} = await this.$http.get('categories', {
					params: this.querInfo
				});
				if (res.meta.status !== 200) return this.$message.error('获取数据失败！');
				this.cateList = res.data.result;
				this.total = res.data.total;
				console.log(this.cateList);
			},
			handleSizeChange(newpage){
				this.querInfo.pagesize = newpage;
				this.getCateList();
			},
			handleCurrentChange(newpagenum){
				this.querInfo.pagenum = newpagenum;
				this.getCateList();
			},
			addCateDialog(){
				this.getParaentsCateList();
				this.dialogVisible = true;
			},
			async getParaentsCateList(){
				const {data:res} = await this.$http.get('categories',{params:{type:2}});
				if (res.meta.status !== 200) return this.$message.error('获取数据失败！');
				console.log(res.data)
				this.parentCateList = res.data;
			},
			handleChange(){
				console.log(this.selectedKeys);
				if (this.selectedKeys.length > 0){
					this.addCateForm.cat_pid = this.selectedKeys[this.selectedKeys.length-1];
					this.addCateForm.cat_level = this.selectedKeys.length;
				}
			},
			addCate(){
				console.log(this.addCateForm);
				this.$refs.addCateFormRef.validate(async (valid)=>{
					if(!valid) return;
					const {data:res} = await this.$http.post('categories',this.addCateForm);
					if (res.meta.status !== 201) {
						// this.dialogVisible = false;
						return this.$message.error('添加数据失败！')};
					this.$message.success('添加数据成功！')
					this.getCateList();
					this.dialogVisible = false;
				});
			},
			addCateDialogClose(){
				this.$refs.addCateFormRef.resetFields();
				this.selectedKeys = [];
				this.addCateForm.cat_level = 0;
				this.addCateForm.cat_pid = 0;
			}
		}
	}
</script>

<style>
	.el-cascader{
		width: 100%;
	}
</style>
